<template>
  <div class="vditor-md" v-loading="isLoading">
    <div ref="khaleesi" :id="uniqueId" class="vditor" />
  </div>
</template>
<script>
import Vditor from 'vditor'
import {qinUpload} from "@/utils/uploadUtils";
export default {
  name: 'mdEditor',
  props:{
    defaultData:{
      type: String,
      default:"",
    }
  },
  data() {
    return {
      uniqueId: Math.random().toString(36).substr(2, 9), // 生成一个随机的唯一id
      articleId:"",
      fileList:[],
      dialogVisible:false,
      dialogImageUrl:null,
      isOpenAddArticle:false,
      isLoading: false,
      isMobile: window.innerWidth <= 960,
      vditor: null,
      uploadNum:0,
      value:"666",
    }
  },
  async created() {
    const articleId = this.$route.params.articleId;
    if(this.articleId!=undefined || this.articleId!=null)
      this.articleId  = articleId;
  },
  async mounted() {
      // this.setDefaultText()
    this.initVditor()
    this.$nextTick(() => {
      this.isLoading = false
    })
  },
  methods: {
    initVditor() {
      const options = {
        value:this.defaultData,
        width: "100%",
        height:"300px",
        tab: '\t',
        counter: '999999',
        // theme: 'dark',
        typewriterMode: true,
        mode: 'sv',
        preview: {
          delay: 100,
          show: !this.isMobile,
          actions:[],
        },
        toolbar: [
          "emoji",
          "headings",
          "bold",
          "italic",
          "strike",
          "link",
          "|",
          "list",
          "ordered-list",
          "check",
          "outdent",
          "indent",
          "|",
          "quote",
          "line",
          "code",
          "inline-code",
          "insert-before",
          "insert-after",
          "|",
          "upload",
          "record",
          "table",
          "|",
          "undo",
          "redo",
          "|",
          "fullscreen",
          "outline",
          "edit-mode",
          // {
          //   // hotkey: '⇧⌘S',
          //   name: 'pull',
          //   tipPosition: 's',
          //   tip: '发布',
          //   className: 'right',
          //   icon:'<svg  className="icon" aria-hidden="true"><use xlink:href="#icon-edit"></use></svg>',
          //   click: this.gotoAddArticle
          // },
          {
            name: "more",
            toolbar: [
              "both",
              "code-theme",
              "content-theme",
              "export",
              "preview",
              "devtools",
              "help",
            ],
          },
        ],
        outline: {
          enable:true,
          position:"right"
        },
        upload:{
          handler:this.upload,
          multiple:false,
        },
      }
      this.vditor = new Vditor(this.uniqueId, options)
    },
    async upload(file) {
      try {
        this.uploadNum++;
        const url = await qinUpload('blog/', file[0], (next)=>{})
        this.vditor.insertValue(`![${file[0].name}](${url})`)
        return url;
      } finally {
        this.uploadNum--;
      }
    },
    //图片上传
    async httpRequest({ file }){
      try {
        this.uploadNum++;
        const url = await qinUpload('blog/', file, (next)=>{})
        this.fileList.push({url:url})
      } finally {
        this.uploadNum--;
      }
      //阻止默认上传行为
      return false;
    },
    //图片下载
    handleDownload(file) {
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片删除
    handleRemove(file) {
      // console.log(file)
      this.fileList = this.fileList.filter(item=>item.url!=file.url)
    },
    getValue(){
      return this.vditor.getValue();
    },
    setDefaultText(str) {
      const savedMdContent = str || localStorage.getItem('vditorvditor') || ''
      if (!savedMdContent.trim()) {
        localStorage.setItem('vditorvditor', defaultText)
      }
    },
  },
}
</script>

<style lang="scss">
.vditor-md{
  .vditor--fullscreen{
    z-index: 1000000000 !important;
  }
}
</style>
